<template>
  <div ref="mainCon" class="container">
    <topTitle
      :titleText="info.titleText"
      :pathUrl="info.pathUrl"
      :btnText="info.btnText"
      :isShowBtn="isShowBtn"
      :oldUrl="info.oldUrl"
    ></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="人员姓名" class="row-padding-bottom">
              <el-input
                placeholder="请输入姓名"
                clearable
                v-model="filterField.name"
                @blur="filterField.name = changeValue($event)"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :lg="8" :xl="6">
            <el-form-item label="审核状态" class="row-padding-bottom">
              <el-select
                v-model="filterField.status"
                filterable
                placeholder="请选择"
                clearable
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <!-- <el-col :lg="8" :xl="6" v-show="loginType == 'JC'">
              <el-form-item label="行业领域" class="row-padding-bottom">
                <el-select
                  v-model="filterField.searchType"
                  filterable
                  placeholder="请选择"
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in searchTypeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col
              :lg="8"
              :xl="6"
              v-show="loginType == 'JC' || info.type == 'GOOD'"
            >
              <el-form-item label="发生单位" class="row-padding-bottom">
                <el-input
                  placeholder="请输入企业/项目名称"
                  clearable
                  v-model="filterField.companyName"
                  @blur="filterField.companyName = changeValue($event)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item
                :label="info.type == 'BAD' ? '记录状态' : '信息状态'"
                class="row-padding-bottom"
              >
                <el-select
                  v-model="filterField.showStatus"
                  filterable
                  placeholder="请选择"
                  clearable
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in showStatusOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
          <el-form-item label="">
            <a
              @click="toggleAdvanced"
              style="margin-left: 40px; color: #409eff; cursor: pointer"
              class="btnColor"
            >
              {{ advanced ? '收起' : '展开' }}
              <i
                :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              ></i>
            </a>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
            <exportBtn
              :dataLen="tableData.length"
              :filterField="filterField"
              api="api-r/employee/creditrecord/listExportByType"
              responseType="get"
            ></exportBtn>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <!-- 列表 -->
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableData"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
          @sort-change="sortChange"
        >
          <el-table-column
            align="center"
            prop="name"
            label="人员姓名"
            :formatter="formatTd"
            width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="idcard"
            label="身份证号"
            width="120"
          >
            <template slot-scope="scope">
              <p>{{ scope.row.idcard | deseHandler(4, 4, '*') || '--' }}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="companyName"
            label="发生单位"
            :formatter="formatTd"
            width="230"
          >
            <template slot-scope="scope">
              <copyText
                v-if="scope.row.projectId"
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
              <copyText
                v-else
                :tableIndex="scope.$index"
                :copyTextName="scope.row.companyName"
                :columnName="'companyName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="occurrenceDate"
            label="发生时间"
            :formatter="formatTd"
            v-if="loginType != 'JC'"
            width="150"
            sortable="custom"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="statusDesc"
            label="审核状态"
            :formatter="formatTd"
            width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="applicant"
            label="申请账号"
            :formatter="formatTd"
            v-if="loginType == 'JC'"
            width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="applicationDate"
            label="申请时间"
            sortable="custom"
            :formatter="formatTd"
            v-if="info.type == 'GOOD' && loginType == 'JC'"
            width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="operatorName"
            label="审核人"
            :formatter="formatTd"
            v-if="loginType == 'JC'"
            width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="operationDate"
            label="审核时间"
            sortable="custom"
            :formatter="formatTd"
            v-if="loginType == 'JC'"
            width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="showStatusDesc"
            :label="info.type == 'BAD' ? '记录状态' : '信息状态'"
            :formatter="formatTd"
            width="200"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.status == 'APPROVED'">{{
                scope.row.showStatusDesc
              }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="操作" fixed="right" width="200">
            <!-- 操作：待审核-审核和人员档案   已驳回/已通过  查看详情和人员档案 -->
            <template slot-scope="scope">
              <div v-if="loginType != 'JC'">
                <!-- 审核通过 -->
                <div v-if="scope.row.status == 'APPROVED'">
                  <el-link type="primary" @click="toDetail(scope.row)"
                    >查看</el-link
                  >
                  <!-- 已撤销 -->
                  <span v-if="scope.row.showStatus == 'CANCLE'">
                    <el-link type="primary" @click="toDelete(scope.row)"
                      >删除</el-link
                    >
                  </span>
                  <span v-else>
                    <el-link type="primary" @click="toBackout(scope.row)"
                      >撤销</el-link
                    >
                  </span>
                </div>
                <!-- 待审核 -->
                <div v-if="scope.row.status == 'AUDIT'">
                  <el-link type="primary" @click="toDetail(scope.row)"
                    >查看</el-link
                  >
                  <el-link type="primary" @click="toRecall(scope.row)"
                    >撤回</el-link
                  >
                </div>
                <!-- 审核不通过 -->
                <div v-if="scope.row.status == 'REJECT'">
                  <el-link type="primary" @click="toDetail(scope.row)"
                    >查看</el-link
                  >
                  <el-link type="primary" @click="toEdit(scope.row)"
                    >编辑</el-link
                  >
                  <el-link type="primary" @click="toDelete(scope.row)"
                    >删除</el-link
                  >
                </div>
                <!-- 已撤回 -->
                <div v-if="scope.row.status == 'UNCOMPLETED'">
                  <el-link type="primary" @click="toEdit(scope.row)"
                    >编辑</el-link
                  >
                  <el-link type="primary" @click="toDelete(scope.row)"
                    >删除</el-link
                  >
                </div>
              </div>
              <div v-else>
                <!-- 审核通过 -->
                <div v-if="scope.row.status == 'APPROVED'">
                  <el-link type="primary" @click="toDetail(scope.row)"
                    >查看</el-link
                  >
                  <!-- 已撤销 -->
                  <span v-if="scope.row.showStatus == 'CANCLE'">
                    <el-link type="primary" @click="toDelete(scope.row)"
                      >删除</el-link
                    >
                  </span>
                  <span v-else>
                    <el-link
                      type="primary"
                      @click="toEdit(scope.row)"
                      v-if="info.type == 'BAD'"
                      >编辑</el-link
                    >
                    <el-link type="primary" @click="toBackout(scope.row)"
                      >撤销</el-link
                    >
                  </span>
                </div>
                <!-- 待审核 -->
                <div v-if="scope.row.status == 'AUDIT'">
                  <el-link type="primary" @click="toAudit(scope.row)"
                    >审核</el-link
                  >
                </div>
                <!-- 审核不通过 -->
                <div v-if="scope.row.status == 'REJECT'">
                  <el-link type="primary" @click="toDetail(scope.row)"
                    >查看</el-link
                  >
                </div>
              </div>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :requestUrl="requestUrl"
          :filterField="filterField"
          @getpageSize="getpageSize"
          @getpageNo="getpageNo"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import common from '../../kits/common'
import scrollTable from '@/mixin/scrollTable.js'
import { mapActions, mapState } from 'vuex'

export default {
  name: 'recordList',
  mixins: [scrollTable],
  props: {
    info: {
      type: Object,
      default: '',
    },
  },
  data() {
    return {
      //   titleText: "不良记录",
      //   pathUrl: "/home/worker/addBadRecord",
      //   oldUrl: "/home/worker/badRecord",
      //   btnText: "添加不良记录",
      isShowBtn: true,
      advanced: false,
      statusOptions: [
        { name: '待审核', id: 'AUDIT' },
        { name: '审核不通过', id: 'REJECT' },
        { name: '已撤回', id: 'UNCOMPLETED' },
        { name: '审核通过', id: 'APPROVED' },
      ], //审核状态
      showStatusOptions: [
        { name: '公示中', id: 'PUBLIC' },
        { name: '未公示', id: 'NOT_PUBLIC' },
        { name: '已撤销', id: 'CANCLE' },
      ],
      searchTypeList: [
        { name: '非建领域', id: 'nc' },
        { name: '建设领域', id: 'cs' },
      ],
      //表格数据
      tableData: [],
      requestUrl: 'api-r/employee/creditrecord/listByType',
      idcardImgList: [],
      //搜索条件
      filterField: {
        name: '',
        companyName: '',
        status: '',
        showStatus: '',
        type: '',
        searchType: '',
      },
      isShow: false, //列表加载
      loading: true,
      isShowDetail: '',
      loginType: '',
      pageNo: 1,
      pageSize: 20,
    }
  },
  created() {
    this.filterField.type = this.info.type
    this.loginType = window.localStorage.getItem('loginType')
    if (this.loginType == 'JC') {
      if (localStorage.getItem('judgeRoleCode') == 'project') {
        this.filterField.searchType = 'cs'
      } else {
        this.filterField.searchType = 'nc'
      }

      this.statusOptions.splice(2, 1)
    }
    // if(this.loginType != "JC"){
    if (this.info.type == 'GOOD') {
      this.showStatusOptions.splice(1, 1)
    }
    // }
    this.filterField.name = this.$route.query.name ? this.$route.query.name : ''
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  activated() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    //查看详情
    toDetail(row) {
      var oldUrl = ''
      var pathName = ''
      var urlName = ''
      if (this.info.type == 'GOOD') {
        oldUrl = '/home/worker/rewards'
        pathName = '/home/worker/RecordDetailJL'
        urlName = 'RecordDetailJL'
      } else {
        oldUrl = '/home/worker/badRecord'
        pathName = '/home/worker/badRecordDetail'
        urlName = 'badRecordDetail'
      }
      this.$router.push({
        path: pathName,
        name: urlName,
        query: {
          id: row.id,
          type: this.info.type,
          operation: 'detail',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: oldUrl,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //撤销
    toBackout(row) {
      this.$prompt('撤销原因：', '撤销', {
        inputType: 'textarea',
        cancelButtonText: '取消',
        confirmButtonText: '确认撤销',
        inputPlaceholder: '请输入撤销原因',
        inputPattern: /^.{1,200}$/,
        inputErrorMessage: '需填写200字以内的撤销原因',
      })
        .then(({ value }) => {
          this.backout(row, value)
        })
        .catch(() => {
          //取消
        })
    },
    backout(row, value) {
      this.axios({
        method: 'post',
        url: 'api-r/employee/creditrecord/revoke',
        data: {
          id: row.id,
          reason: value,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '撤销成功',
                type: 'success',
              })
              this.$nextTick(function () {
                this.$refs.pagination.getTableListData()
              })
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //撤回
    toRecall(row) {
      this.$confirm('确认撤回?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.recall(row)
        })
        .catch(() => {})
    },
    recall(row) {
      this.axios({
        method: 'post',
        url: 'api-r/employee/creditrecord/cancle',
        data: {
          id: row.id,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '撤回成功',
                type: 'success',
              })
              this.$nextTick(function () {
                this.$refs.pagination.getTableListData()
              })
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //删除
    toDelete(row) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delete(row)
        })
        .catch(() => {})
    },
    delete(row) {
      this.axios({
        method: 'post',
        url: 'api-r/employee/creditrecord/delete',
        data: {
          id: row.id,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              this.$nextTick(function () {
                this.$refs.pagination.getTableListData()
              })
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //编辑
    toEdit(row) {
      //   监察和企业编辑
      var oldUrl = ''
      var url = ''
      if (this.info.type == 'GOOD') {
        oldUrl = '/home/worker/rewards'
        url = '/home/worker/addRewardsRecord'
      } else {
        oldUrl = '/home/worker/badRecord'
        url = '/home/worker/addBadRecord'
      }
      if (this.loginType == 'JC') {
        this.$router.push({
          path: '/home/worker/badRecordDetail',
          name: 'badRecordDetail',
          query: {
            id: row.id,
            type: this.info.type,
            operation: 'edit',
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: oldUrl,
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        this.$router.push({
          path: url,
          // name: "addBadRecord",
          query: {
            id: row.id,
            isEdit: 'true',
            type: this.info.type,
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: oldUrl,
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    // 审核
    toAudit(row) {
      var oldUrl = ''
      if (this.info.type == 'GOOD') {
        oldUrl = '/home/worker/rewards'
      } else {
        oldUrl = '/home/worker/badRecord'
      }
      this.$router.push({
        path: '/home/worker/badRecordDetail',
        name: 'badRecordDetail',
        query: {
          id: row.id,
          type: this.info.type,
          operation: 'audit',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: oldUrl,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '../../../static/css/filterArea.less';
</style>
